<template>
  <view class="sidebar-view">
    <view
      v-for="(item, i) of arr"
      :key="i"
      :class="i+1 == clicknum ? 'item2' : 'item'"
      @click="selecttype(item, i+1)"
    >
      <view>{{ item.title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { title: "待提交", value: 1, subtitle: "待提交" },
        { title: "审核中", value: 2, subtitle: "审核中" },
        { title: "已通过", value: 3, subtitle: "已通过" },
        { title: "已驳回", value: 4, subtitle: "已驳回" },
        // { title: "已完工", value: 4, subtitle: "已完工" }
      ],
      clicknum: 1,
    };
  },
  methods: {
    selecttype(item, i) {
		console.log('item----------',item)
      this.clicknum = i;
      this.$emit("selectheader", item);
    },
  },
};
</script>

<style scoped >
	/* .sidebar-view{
		background-color: #E0E0E0;
		height: 100vh;
	} */
.item,
.item2 {
  width: 100%;
  padding: 25rpx 15rpx;
  box-sizing: border-box;
  text-align: center;
  color: #595757;
  font-size: 28rpx;
  transition: all 0.5s;
  font-family: Source Han Sans CN;
}
.item2 {
  color: #2f66c0;
  position: relative;
  background: #efefef;
}
</style>